<template>
  <right-drawer title="弹幕消息" :show="show">
    <div class="msgs" v-el:msgs>
      <ul>
          <li v-for="msg in msgs">
              <div class="msg">
                  <span class="msg-time">{{msg.serverdate}}</span>
                  <span class="msg-user">{{msg.nn}}:</span>
                  <span class="msg-content">{{msg.txt}}</span>
              </div>
          </li>
      </ul>
    </div>
  </right-drawer>
</template>

<script>
import rightDrawer from './rightDrawer'
import { isShowMsg, getMsgs } from '../../vuex/getters'
import { bindMsgEl } from '../../vuex/actions'
export default {
  vuex: {
    getters: {
      show: isShowMsg,
      msgs: getMsgs
    },
    actions: {
      init: bindMsgEl
    }
  },
  attached () {
    this.init(this.$els.msgs)
  },
  components: {
    rightDrawer
  }
}
</script>

<style lang="less">
.msgs{
  padding: 0px 10px;
  position: absolute;
  width: 100%;
  top: 60px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  overflow-y: scroll;
  ul{
    list-style: none;
    margin: 0px;
    padding: 10px;
  }
}
.msg{
  padding: 5px 0px;
  span{
    margin-right: 5px;
  }
  .msg-time{
    color:#2c3e50;
  }
  .msg-user{
    color: #56abe4;
  }
  .msg-content{
    color: #4a4a4a;
  }
}
.msg-gift .msg{
  span{
    color: #eb4f38;
  }
}
</style>
